<template>
  <div class="Con">
    <div class="Con-H">
      <!--头部分-->
      <table cellpadding="4px">
        <tr>
          <td style="width: 40%">
            <el-select
              v-model="room"
              placeholder="请选择课室"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in Room"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </td>
          <td style="width: 40%">
            <el-select
              v-model="week"
              placeholder="请选择周数"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in Week"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </td>
          <td style="width: 20%">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              style="width: 100%"
              @click="search()"
              >搜 索</el-button
            >
          </td>
        </tr>
      </table>
    </div>

    <div class="Con-C">
      <!--内容部分-->
      <table cellspacing="4px">
        <tr style="height: 4%; font-weight: 600">
          <td></td>
          <td style="background-color: slategrey">1 , 2节</td>
          <td style="background-color: slategrey">3 , 4节</td>
          <td style="background-color: slategrey">5 , 6节</td>
          <td style="background-color: slategrey">7 , 8节</td>
          <td style="background-color: slategrey">9,10节</td>
          <td style="background-color: slategrey">11,12节</td>
        </tr>

        <tr>
          <td>星期一</td>
          <td>
            <p>{{ day1C1.c_name }}</p>
            <p>{{ day1C1.c_grade }}</p>
            <p>{{ day1C1.c_classroom }}</p>
            <p>{{ day1C1.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day1C2.c_name }}</p>
            <p>{{ day1C2.c_grade }}</p>
            <p>{{ day1C2.c_classroom }}</p>
            <p>{{ day1C2.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day1C3.c_name }}</p>
            <p>{{ day1C3.c_grade }}</p>
            <p>{{ day1C3.c_classroom }}</p>
            <p>{{ day1C3.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day1C4.c_name }}</p>
            <p>{{ day1C4.c_grade }}</p>
            <p>{{ day1C4.c_classroom }}</p>
            <p>{{ day1C4.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day1C5.c_name }}</p>
            <p>{{ day1C5.c_grade }}</p>
            <p>{{ day1C5.c_classroom }}</p>
            <p>{{ day1C5.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day1C6.c_name }}</p>
            <p>{{ day1C6.c_grade }}</p>
            <p>{{ day1C6.c_classroom }}</p>
            <p>{{ day1C6.c_teacher }}</p>
          </td>
        </tr>

        <tr>
          <td>星期二</td>
          <td>
            <p>{{ day2C1.c_name }}</p>
            <p>{{ day2C1.c_grade }}</p>
            <p>{{ day2C1.c_classroom }}</p>
            <p>{{ day2C1.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day2C2.c_name }}</p>
            <p>{{ day2C2.c_grade }}</p>
            <p>{{ day2C2.c_classroom }}</p>
            <p>{{ day2C2.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day2C3.c_name }}</p>
            <p>{{ day2C3.c_grade }}</p>
            <p>{{ day2C3.c_classroom }}</p>
            <p>{{ day2C3.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day2C4.c_name }}</p>
            <p>{{ day2C4.c_grade }}</p>
            <p>{{ day2C4.c_classroom }}</p>
            <p>{{ day2C4.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day2C5.c_name }}</p>
            <p>{{ day2C5.c_grade }}</p>
            <p>{{ day2C5.c_classroom }}</p>
            <p>{{ day2C5.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day2C6.c_name }}</p>
            <p>{{ day2C6.c_grade }}</p>
            <p>{{ day2C6.c_classroom }}</p>
            <p>{{ day2C6.c_teacher }}</p>
          </td>
        </tr>

        <tr>
          <td>星期三</td>
          <td>
            <p>{{ day3C1.c_name }}</p>
            <p>{{ day3C1.c_grade }}</p>
            <p>{{ day3C1.c_classroom }}</p>
            <p>{{ day3C1.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day3C2.c_name }}</p>
            <p>{{ day3C2.c_grade }}</p>
            <p>{{ day3C2.c_classroom }}</p>
            <p>{{ day3C2.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day3C3.c_name }}</p>
            <p>{{ day3C3.c_grade }}</p>
            <p>{{ day3C3.c_classroom }}</p>
            <p>{{ day3C3.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day3C4.c_name }}</p>
            <p>{{ day3C4.c_grade }}</p>
            <p>{{ day3C4.c_classroom }}</p>
            <p>{{ day3C4.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day3C5.c_name }}</p>
            <p>{{ day3C5.c_grade }}</p>
            <p>{{ day3C5.c_classroom }}</p>
            <p>{{ day3C5.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day3C6.c_name }}</p>
            <p>{{ day3C6.c_grade }}</p>
            <p>{{ day3C6.c_classroom }}</p>
            <p>{{ day3C6.c_teacher }}</p>
          </td>
        </tr>

        <tr>
          <td>星期四</td>
          <td>
            <p>{{ day4C1.c_name }}</p>
            <p>{{ day4C1.c_grade }}</p>
            <p>{{ day4C1.c_classroom }}</p>
            <p>{{ day4C1.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day4C2.c_name }}</p>
            <p>{{ day4C2.c_grade }}</p>
            <p>{{ day4C2.c_classroom }}</p>
            <p>{{ day4C2.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day4C3.c_name }}</p>
            <p>{{ day4C3.c_grade }}</p>
            <p>{{ day4C3.c_classroom }}</p>
            <p>{{ day4C3.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day4C4.c_name }}</p>
            <p>{{ day4C4.c_grade }}</p>
            <p>{{ day4C4.c_classroom }}</p>
            <p>{{ day4C4.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day4C5.c_name }}</p>
            <p>{{ day4C5.c_grade }}</p>
            <p>{{ day4C5.c_classroom }}</p>
            <p>{{ day4C5.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day4C6.c_name }}</p>
            <p>{{ day4C6.c_grade }}</p>
            <p>{{ day4C6.c_classroom }}</p>
            <p>{{ day4C6.c_teacher }}</p>
          </td>
        </tr>

        <tr>
          <td>星期五</td>
          <td>
            <p>{{ day5C1.c_name }}</p>
            <p>{{ day5C1.c_grade }}</p>
            <p>{{ day5C1.c_classroom }}</p>
            <p>{{ day5C1.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day5C2.c_name }}</p>
            <p>{{ day5C2.c_grade }}</p>
            <p>{{ day5C2.c_classroom }}</p>
            <p>{{ day5C2.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day5C3.c_name }}</p>
            <p>{{ day5C3.c_grade }}</p>
            <p>{{ day5C3.c_classroom }}</p>
            <p>{{ day5C3.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day5C4.c_name }}</p>
            <p>{{ day5C4.c_grade }}</p>
            <p>{{ day5C4.c_classroom }}</p>
            <p>{{ day5C4.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day5C5.c_name }}</p>
            <p>{{ day5C5.c_grade }}</p>
            <p>{{ day5C5.c_classroom }}</p>
            <p>{{ day5C5.c_teacher }}</p>
          </td>

          <td>
            <p>{{ day5C6.c_name }}</p>
            <p>{{ day5C6.c_grade }}</p>
            <p>{{ day5C6.c_classroom }}</p>
            <p>{{ day5C6.c_teacher }}</p>
          </td>
        </tr>
      </table>
    </div>

    <div class="Con-B">
      <p>广州城市理工学院计算机实验中心 &nbsp;&copy;软件创新实验室</p>
    </div>
  </div>
</template>

<script>
import { axios1 } from "@/network";
import Qs from "qs";
export default {
  data() {
    return {
      room: "",
      Room: [102, 203, 301, 304, 401, 403, 404, 501, 503, 504],
      week: "",
      Week: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22,
      ],

      Day1: [],
      day1C1: "",
      day1C2: "",
      day1C3: "",
      day1C4: "",
      day1C5: "",
      day1C6: "",

      Day2: [],
      day2C1: "",
      day2C2: "",
      day2C3: "",
      day2C4: "",
      day2C5: "",
      day2C6: "",

      Day3: [],
      day3C1: "",
      day3C2: "",
      day3C3: "",
      day3C4: "",
      day3C5: "",
      day3C6: "",

      Day4: [],
      day4C1: "",
      day4C2: "",
      day4C3: "",
      day4C4: "",
      day4C5: "",
      day4C6: "",

      Day5: [],
      day5C1: "",
      day5C2: "",
      day5C3: "",
      day5C4: "",
      day5C5: "",
      day5C6: "",
    };
  },
  methods: {
    search() {
      if (this.room == "" || this.week == "") {
        alert("选项不可以为空！！");
      } else {
        console.log(this.room);
        console.log(this.week);
        let myData = {
          room: this.room,
          c_week: this.week,
        };
        axios1({
          url: "/course/getWeekTotalCourseByroom",
          method: "post",
          data: Qs.stringify(myData),
        })
          .then((res) => {
            //location.reload()

            (this.Day1 = []),
              (this.day1C1 = ""),
              (this.day1C2 = ""),
              (this.day1C3 = ""),
              (this.day1C4 = ""),
              (this.day1C5 = ""),
              (this.day1C6 = ""),
              (this.Day2 = []),
              (this.day2C1 = ""),
              (this.day2C2 = ""),
              (this.day2C3 = ""),
              (this.day2C4 = ""),
              (this.day2C5 = ""),
              (this.day2C6 = ""),
              (this.Day3 = []),
              (this.day3C1 = ""),
              (this.day3C2 = ""),
              (this.day3C3 = ""),
              (this.day3C4 = ""),
              (this.day3C5 = ""),
              (this.day3C6 = ""),
              (this.Day4 = []),
              (this.day4C1 = ""),
              (this.day4C2 = ""),
              (this.day4C3 = ""),
              (this.day4C4 = ""),
              (this.day4C5 = ""),
              (this.day4C6 = ""),
              (this.Day5 = []),
              (this.day5C1 = ""),
              (this.day5C2 = ""),
              (this.day5C3 = ""),
              (this.day5C4 = ""),
              (this.day5C5 = ""),
              (this.day5C6 = ""),
              (this.Day1 = res.data.data[0]);
            for (let i = 0; i < this.Day1.length; i++) {
              if (this.Day1[i].c_time == "08:40:00") {
                this.day1C1 = this.Day1[i];
              } else if (this.Day1[i].c_time == "10:25:00") {
                this.day1C2 = this.Day1[i];
              } else if (this.Day1[i].c_time == "14:15:00") {
                this.day1C3 = this.Day1[i];
              } else if (this.Day1[i].c_time == "15:55:00") {
                this.day1C4 = this.Day1[i];
              } else if (this.Day1[i].c_time == "18:15:00") {
                this.day1C5 = this.Day1[i];
              } else if (this.Day1[i].c_time == "20:00:00") {
                this.day1C6 = this.Day1[i];
              }
            }
            //============================================================
            this.Day2 = res.data.data[1];
            for (let i = 0; i < this.Day2.length; i++) {
              if (this.Day2[i].c_time == "08:40:00") {
                this.day2C1 = this.Day2[i];
              } else if (this.Day2[i].c_time == "10:25:00") {
                this.day2C2 = this.Day2[i];
              } else if (this.Day2[i].c_time == "14:15:00") {
                this.day2C3 = this.Day2[i];
              } else if (this.Day2[i].c_time == "15:55:00") {
                this.day2C4 = this.Day2[i];
              } else if (this.Day2[i].c_time == "18:15:00") {
                this.day2C5 = this.Day2[i];
              } else if (this.Day2[i].c_time == "20:00:00") {
                this.day2C6 = this.Day2[i];
              }
            }
            //===================================================================================
            this.Day3 = res.data.data[2];
            for (let i = 0; i < this.Day3.length; i++) {
              if (this.Day3[i].c_time == "08:40:00") {
                this.day3C1 = this.Day3[i];
              } else if (this.Day3[i].c_time == "10:25:00") {
                this.day3C2 = this.Day3[i];
              } else if (this.Day3[i].c_time == "14:15:00") {
                this.day3C3 = this.Day3[i];
              } else if (this.Day3[i].c_time == "15:55:00") {
                this.day3C4 = this.Day3[i];
              } else if (this.Day3[i].c_time == "18:15:00") {
                this.day3C5 = this.Day3[i];
              } else if (this.Day3[i].c_time == "20:00:00") {
                this.day3C6 = this.Day3[i];
              }
            }
            //==============================================================================================
            this.Day4 = res.data.data[3];
            for (let i = 0; i < this.Day4.length; i++) {
              if (this.Day4[i].c_time == "08:40:00") {
                this.day4C1 = this.Day4[i];
              } else if (this.Day4[i].c_time == "10:25:00") {
                this.day4C2 = this.Day4[i];
              } else if (this.Day4[i].c_time == "14:15:00") {
                this.day4C3 = this.Day4[i];
              } else if (this.Day4[i].c_time == "15:55:00") {
                this.day4C4 = this.Day4[i];
              } else if (this.Day4[i].c_time == "18:15:00") {
                this.day4C5 = this.Day4[i];
              } else if (this.Day4[i].c_time == "20:00:00") {
                this.day4C6 = this.Day4[i];
              }
            }
            //============================================================================
            this.Day5 = res.data.data[4];
            for (let i = 0; i < this.Day5.length; i++) {
              if (this.Day5[i].c_time == "08:40:00") {
                this.day5C1 = this.Day5[i];
              } else if (this.Day5[i].c_time == "10:25:00") {
                this.day5C2 = this.Day5[i];
              } else if (this.Day5[i].c_time == "14:15:00") {
                this.day5C3 = this.Day5[i];
              } else if (this.Day5[i].c_time == "15:55:00") {
                this.day5C4 = this.Day5[i];
              } else if (this.Day5[i].c_time == "18:15:00") {
                this.day5C5 = this.Day5[i];
              } else if (this.Day5[i].c_time == "20:00:00") {
                this.day5C6 = this.Day5[i];
              }
            }
            //===========================================
            console.log(res);
            if (
              this.Day1.length == 0 &&
              this.Day2.length == 0 &&
              this.Day3.length == 0 &&
              this.Day4.length == 0 &&
              this.Day5.length == 0
            ) {
              this.$message({
                message: "没有课哦！",
                type: "warning",
                duration: 1500,
              });
            }
          })
          .catch((res) => {
            alert("服务端发生错误！");
            console.log(res);
          });
      }
    },
  },

  created() {},
  computed: {},
};
</script>

<style scoped>
html {
  box-sizing: border-box;
}
table {
  box-sizing: border-box;
}
p {
  padding: 0px;
  margin: 0px;
}

.Con {
  width: 80%;
  height: 100vh;
  margin: auto;

  overflow: auto;
}
.Con-H {
  width: 100%;
  height: 10%;
  overflow: hidden;
  border-bottom: 1px solid rgb(235, 235, 235);
  background-color: rgb(255, 255, 255);
}
.Con-H table {
  width: 100%;
  height: 100%;
}
.Con-C {
  width: 100%;
  height: 88%;

  overflow: auto;
}
.Con-C table {
  width: 100%;
  height: 100%;
}

.Con-C table tr td {
  text-align: center;
  width: 10%;
  box-shadow: 1px 1px 6px rgb(56, 56, 56);
  color: rgb(32, 32, 32);
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
}
.Con-C table tr td:hover {
  box-shadow: 1px 1px 10px rgb(10, 10, 10);
}
.Con-C table tr {
  height: 19%;
}
.Con-B {
  width: 100%;
  height: 3%;
}
.Con-B p {
  text-align: center;
  font-size: 14px;
  padding-top: 3px;
  font-weight: 700;
  color: rgb(61, 75, 88);
}

@media screen and (max-width: 768px) {
  .Con {
    width: 100%;
  }
  .Con-C table tr td {
    font-size: 7px;
    font-weight: 600;
    padding: 2px 3px;
  }
  .Con-B p {
    font-size: 6px;
  }
}
</style>
